<template>
    <div>  
        <div class="table-grid-content">
                <el-button type="primary" @click="addRow()" >新增</el-button>
                <el-input v-model.lazy="input" class="search" placeholder="请输入搜索内容"></el-input>
                <el-button type="success" icon="el-icon-search">搜索</el-button>
        </div>
        <el-table :data='tables'>
            <el-table-column type="index" >
            </el-table-column>
            <el-table-column  prop="date" label="日期" width="140" >
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120" >
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column >
            <!-- 为了解决在elementui运用表格用不了v-for方法获取下标，使用下面方法获取该行元素数据-->
            <template slot-scope="scope">
                <!-- 点击编辑时将数据下表和该行数据 -->
              <el-button type="primary" icon="el-icon-edit" circle  @click="handleEdit(scope.$index, scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,tables )"></el-button>

            </template>
            </el-table-column>
        </el-table>
        <!-- 修改学生信息弹窗 -->
        <el-dialog title="学生信息" :visible.sync="dialogFormVisible" >
        <el-form>
          <!-- 弄一个空的editform数组用来存储该行数据,以避免修改数据没提交时调用v-model。 -->
            <el-form-item label="姓名"  :label-width="formLabelWidth" :model="editForm">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input v-model="editForm.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="editForm.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary"  @click="sumbitEditRow()">确 定</el-button>
        </div>
        </el-dialog>
        <!-- 添加学生信息弹窗 -->
        <el-dialog title="新增学生信息" :visible.sync="addFormVisible" >
        <el-form>
          <!-- 弄一个空的editform数组用来存储该行数据,以避免修改数据没提交时调用v-model。 -->
            <el-form-item label="姓名"  :label-width="formLabelWidth" :model="addForm">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input v-model="addForm.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="addForm.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel1()">取 消</el-button>
            <el-button type="primary"   @click="sumbitAddRow()" >确 定</el-button>
        </div>
        </el-dialog>

         <!-- 修改密码对话框，还没写完 -->
        <el-dialog title="新增学生信息" :visible.sync="addFormVisible" >
        <el-form>
            <el-form-item label="姓名"  :label-width="formLabelWidth" :model="addForm">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input v-model="addForm.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="addForm.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel1()">取 消</el-button>
            <el-button type="primary"   @click="sumbitAddRow()" >确 定</el-button>
        </div>
        </el-dialog>
    </div>
    
</template>
<script>
export default {
    name:'Grade',
    data() {
      return {
        tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'0'
      },{
        date: '2016-05-01',
        name: '王小明',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'1'
      },{
        date: '2016-05-08',
        name: '王小红',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'2'
      },{
        date: '2016-05-01',
        name: '王小亮',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'3'
      },{
        date: '2016-05-22',
        name: '王小虎',
       address: '上海市普陀区金沙江路 1518 弄',
        index:'4'
      },{
        date: '2016-05-01',
        name: '王小明',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'5'
      },{
        date: '2016-05-08',
        name: '王小红',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'6'
      },{
        date: '2016-05-01',
        name: '王小亮',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'7'
      },{
        date: '2016-05-22',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'8'
      },{
        date: '2016-05-22',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'9'
      },{
        date: '2016-05-01',
        name: '王小明',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'10'
      },{
        date: '2016-05-08',
        name: '王小红',
       address: '上海市普陀区金沙江路 1518 弄',
        index:'11'
      },{
        date: '2016-05-01',
        name: '王小亮',
       address: '上海市普陀区金沙江路 1518 弄',
        index:'12'
      },{
        date: '2016-05-22',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        index:'13'
      }],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        editForm:[],
        _index:[],
        addForm:{},
        addFormVisible:false,
        input:''
      }
},
methods:{
     //编辑数据
    handleEdit(index, row) {
      this.dialogFormVisible=true
      this.editForm = Object.assign({}, row);
      this._index = index;
      // console.log(index)
      // console.log(_index)
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    sumbitEditRow() {
      var editData =this. _index;
      this.tableData[editData].name = this.editForm.name;
      this.tableData[editData].date = this.editForm.date;
      this.tableData[editData].address = this.editForm.address;
      this.dialogFormVisible = false;
      this.$message({
          type: 'success',
          message: '修改成功!',
        })
    },
    cancel(){
      this.dialogFormVisible=false
      this.$message({
          type: 'error',
          message: '取消修改!',
        })

    },
    //  删除数据
     handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index)
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    //新增数据
    addRow() {
      this.addFormVisible = true;
      this.addForm = {
        name: '',
        date:'',
        address: ''
      }
    },
    //将新增的数据添加到表格中
    sumbitAddRow() {
      if(this.addForm.name!=''&&this.addForm.date!=''&&this.addForm.address!=''){
      this.tableData.push({
        name: this.addForm.name,
        date: this.addForm.date,
        address: this.addForm.address,
      })
      this.$message({
          type: 'success',
          message: '添加数据成功!',
        })
      }
      else{
         this.$message({
          type: 'error',
          message: '添加数据失败!',
        })

      }
      this.addFormVisible = false
    },
    cancel1(){
      this.$message({
          type: 'error',
          message: '取消成功!',
        })
         this.addFormVisible = false
    },
    
},
computed:{
// 搜索功能的实现，如果搜索到内容的话把内容渲染到tables中，否则显示之前所有数据
		tables() {
		const input = this.input
		if (input) {
				return this.tableData.filter(data => {
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(input) > -1
						})
					})
				}
        return this.tableData
		}
}


}
</script>
<style lang='stylus' scoped>
.search
  display:inline-block
  width: 500px
</style>